<template>
  <div class="analyse">
    <a-row :gutter="[16, 16]">
      <a-col :span="12">
        <div class="chart-item">
          <h3 class="item-title">故障数据统计</h3>
          <div class="item-container">
            <screen-item @saveNum="saveNum"></screen-item>
            <div id="main" style="width: 100%;height:300px;"></div>
          </div>
        </div>
      </a-col>
      <a-col :span="12">
        <div class="chart-item">
          <h3 class="item-title">故障类型统计</h3>
          <div class="item-container">
            <screen-item @saveNum="saveNum2"></screen-item>
            <div id="main2" style="width: 100%;height:300px;"></div>
          </div>
        </div>
      </a-col>
    </a-row>
    <a-row :gutter="[16, 16]">
      <a-col :span="12">
        <div class="chart-item">
          <h3 class="item-title">报警级别</h3>
          <div class="item-container">
            <screen-item @saveNum="saveNum3"></screen-item>
            <div id="main3" style="width: 100%;height:300px;"></div>
          </div>
        </div>
      </a-col>
      <a-col :span="12">
        <!-- <div class="chart-item">
          <h3 class="item-title">报警级别</h3>
          <div class="item-container">
            <screen-item></screen-item>
          </div>
        </div> -->
      </a-col>
    </a-row>
  </div>
</template>

<script>
import screenItem from '../../components/sreenItem/screenItem';
import * as echarts from 'echarts';
import { mapState } from 'vuex';
import {
  getStatLinkErrorNum,
  getStatLinkErrorType,
  getAlarmClass,
} from '@/services/user';

export default {
  name: 'Demo',
  i18n: require('./i18n'),
  data() {
    return {};
  },
  components: {
    screenItem,
  },
  computed: {
    ...mapState('setting', ['pageMinHeight']),
    desc() {
      return this.$t('description');
    },
  },
  mounted() {
    getStatLinkErrorNum({
      start: window.localStorage.getItem('startTime'),
      end: window.localStorage.getItem('endTime'),
    }).then(this.afterStatLinkErrorNum);
    getStatLinkErrorType({
      start: window.localStorage.getItem('startTime'),
      end: window.localStorage.getItem('endTime'),
    }).then(this.afterStatLinkErrorNum2);
    getAlarmClass({
      start: window.localStorage.getItem('startTime'),
      end: window.localStorage.getItem('endTime'),
    }).then(this.afterStatLinkErrorNum3);
  },
  methods: {
    saveNum(arr) {
      getStatLinkErrorNum({
        start: arr[0],
        end: arr[1],
      }).then(this.afterStatLinkErrorNum);
      // 接受传递过来的参数
    },
    saveNum2(arr) {
      getStatLinkErrorType({
        start: arr[0],
        end: arr[1],
      }).then(this.afterStatLinkErrorNum2);
      // 接受传递过来的参数
    },
    saveNum3(arr) {
      getAlarmClass({
        start: arr[0],
        end: arr[1],
      }).then(this.afterStatLinkErrorNum3);
      // 接受传递过来的参数
    },

    transitionArr(arr, type) {
      if (arr.length === 0) {
        return [];
      }
      let returnArr = [];
      switch (type) {
        case 'type_count':
          arr.forEach((item) => {
            returnArr.push(item.type_count);
          });
          return returnArr;
        case 'error_count':
          arr.forEach((item) => {
            returnArr.push(item.error_count);
          });
          return returnArr;
        case 'xAxis':
          arr.forEach((item) => {
            returnArr.push(item.day_time);
          });
          return returnArr;
      }
    },
    afterStatLinkErrorNum(res) {
      console.log(res.data.result);
      //  重新渲染图表
      var myChart = echarts.init(document.getElementById('main'));
      // 绘制图表
      myChart.setOption({
        tooltip: {},
        xAxis: {
          type: 'category',
          name: '日期',
          data: this.transitionArr(res.data.result, 'xAxis'),
        },
        yAxis: {
          name: '数量',
        },
        series: [
          {
            name: '数量',
            type: 'bar',
            barWidth: 20,
            data: this.transitionArr(res.data.result, 'error_count'),
          },
        ],
      });
    },
    afterStatLinkErrorNum2(res) {
      console.log(res.data.result);
      //  重新渲染图表
      var myChart = echarts.init(document.getElementById('main2'));
      // 绘制图表
      myChart.setOption({
        tooltip: {},
        xAxis: {
          type: 'category',
          name: '日期',
          data: this.transitionArr(res.data.result, 'xAxis'),
        },
        yAxis: {
          name: '数量',
        },
        series: [
          {
            name: '数量',
            type: 'bar',
            barWidth: 20,
            data: this.transitionArr(res.data.result, 'type_count'),
          },
        ],
      });
    },
    afterStatLinkErrorNum3(res) {
      //  重新渲染图表
      var myChart = echarts.init(document.getElementById('main3'));
      let obj = res.data.result[0];
      // 绘制图表
      myChart.setOption({
        tooltip: {},
        xAxis: {
          type: 'category',
          name: '级别',
          data: ['高级', '中级', '低级'],
        },
        yAxis: {
          name: '数量',
        },
        series: [
          {
            name: '数量',
            type: 'bar',
            barWidth: 20,
            data: [obj.high, obj.medium, obj.low],
          },
        ],
      });
    },
  },
};
</script>

<style scoped lang="less">
@import 'index';
.item-container {
  padding: 0 16px;
}
</style>
